<template>
<div style="padding:0px;">

<div :style="{width: offsetwidth + 'px', height : offsetheight + 'px'}">
      <el-amap vid="amapDemo"  
      :center="center" 
      :amap-manager="amapManager"  
      :zoom="zoom" 
      :events="events"
      class="amap-demo">

      	<el-amap-marker vid="component-marker" 
      	ref="marker"
      	v-if="marker.position.length != 0"
      	:position="marker.position" 
      	:events="marker.events" 
      	></el-amap-marker>

      	<el-amap-marker vid="event-marker" 
      	ref="marker_event"
      	v-for="(marker, index) in eventMarkers" :key="index"
      	:position="marker.position" 
      	:events="marker.events" 
      	:icon="marker.icon"
      	></el-amap-marker>


      	<el-amap-info-window :position="infoDlg.position" :visible="infoDlg.visible">
          <div >
            <div style="padding:10px; font-weight: bold; border-bottom: 1px solid #EBEEF5;">
            {{infoDlg.title}}</div>
            <div style="padding:10px;">
            	<div v-for="(item, index) in infoDlg.msg" :key="index">{{item}}</div>

            	<el-button type="primary" @click="onClick(infoDlg.info)" 
            	size="mini" class="mt5"
            	v-if="infoDlg.info.what == 'question'"
            	>查看详情</el-button>
            </div>
            
          </div>
        </el-amap-info-window>

        <el-amap-polygon v-for="(polygon, index) in polygons" :vid="index"  :path="polygon.path" :fillOpacity="polygon.fillOpacity"></el-amap-polygon>


        <el-amap-polygon  :path="pathPolygon.path" 
        fillOpacity="0.3"
        fillColor="#FFAA00"
        ></el-amap-polygon>

      </el-amap>
</div>


<div class="a1" 
:style="{'top' : 75 + 'px', 'left' : 15 + 'px'}"
>
	<template v-if="state == '1'">

		<!-- <el-button-group >
		  <el-button type="primary" size="small" style="background:#4BACC6;"
		  @click="question"
		  > 事件 </el-button>
		  <el-button type="primary" size="small" style="background:#4BACC6;"
		  @click="user"
		  > 网格员 </el-button>
		  <el-button type="primary" size="small" style="background:#4BACC6;"
		  @click="company"
		  > 企业单位 </el-button>
		  <el-button type="primary" size="small" style="background:#4BACC6;"
		  @click="trajectory"
		  > 网格员轨迹 </el-button>
		  <el-button type="primary" size="small" style="background:#4BACC6;"
		  @click="grid"
		  > 网格列表 </el-button>
		  <el-button type="primary" size="small" icon="el-icon-arrow-left" 
			@click="close" style="background:#4BACC6;"
			></el-button>
		</el-button-group> -->


		<el-button type="primary" icon="el-icon-menu" 
		@click="open" style="background:#fff; color:#4BACC6;" class="h1"
		></el-button>


		<div class="a3 h3 pointer" @click="question">
			事件
		</div>

		<div class="a3 h3 pointer" @click="user">
			网格员
		</div>

		<div class="a4 h3 pointer" @click="company">
			企业<br>单位
		</div>

		<div class="a4 h3 pointer" @click="trajectory">
			网格员<br>轨迹
		</div>

		<div class="a4 h3 pointer" @click="grid">
			网格<br>列表
		</div>

	</template>

	<template v-else>
		<!-- <el-button type="primary" size="small" icon="el-icon-arrow-right" 
		@click="open" style="background:#4BACC6;"
		></el-button> -->

		<el-button type="primary" icon="el-icon-menu" 
		@click="open" style="background:#4BACC6;" class="h1"
		></el-button>
	</template>
	
</div>



<el-card class="box-card a2" v-if="dlg && state == '1'"
:style="{'top' : 75 + 'px', 'left' : 80 + 'px'}"
:body-style="{ padding: '0px' }"
>
  <div slot="header" class="clearfix" >
    <span class="h4">{{current.name}}</span>

    <el-button style="float: right; padding: 5px; margin-left:5px;" icon="el-icon-close" 
    @click="closeDlg"
    ></el-button>

    <!-- <el-button style="float: right; padding: 5px;" icon="el-icon-arrow-down" 
    v-show="showdlg"
    @click="changeDlg"
    ></el-button>

    <el-button style="float: right; padding: 5px;" icon="el-icon-arrow-up" 
    v-show="!showdlg"
    @click="changeDlg"
    ></el-button> -->
  </div>

  	<el-container :style="{height: offsetheight - 75 + 'px'}" 
  	v-show="showdlg">
  		<el-main style="padding:10px;">
		  	<trajectory v-if="what == 'trajectory'"
		  	:treedata="treedata"
		  	v-on:playback="playback"
		  	></trajectory>

		  	<question v-if="what == 'question'"
		  	:treedata="treedata"
		  	v-on:getpoint="getpoint"
		  	></question>

		  	<user v-if="what == 'user'"
		  	:treedata="treedata"
		  	v-on:getpoint="getpoint"
		  	></user>

		  	<company v-if="what == 'company'"
		  	:treedata="treedata"
		  	v-on:getpoint="getpoint"
		  	></company>

		  	<grid v-if="what == 'grid'"
		  	:treedata="treedata"
		  	v-on:showgrid="showgrid"
		  	v-on:getpoint="getpoint"
		  	></grid>
  		</el-main>
  	</el-container>
  
</el-card>


<!-- 事件详情 -->
<el-dialog
  :title="currentEvent.info.question_title"
  :visible.sync="eventDialogVisible"
  append-to-body
  width="900px">
  	<eventinfo :obj="currentEvent"></eventinfo>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

import Vue from 'vue';
import daterange from '@/components/daterange'
import trajectory from './components/trajectory'
import question from './components/question'
import user from './components/user'
import company from './components/company'
import grid from './components/grid'
import eventinfo from '@/views/event/info'

import VueAMap from 'vue-amap'

import { lazyAMapApiLoaderInstance } from 'vue-amap';

let amapManager = new VueAMap.AMapManager();
//const loadPromise = VueAMap.lazyAMapApiLoaderInstance();

export default {
	
	name : 'dashboard',
	
	data () {
		return {
		  	offsetwidth:document.documentElement.clientWidth - 210,
		  	offsetheight : document.documentElement.clientHeight - 70,

		  	state : '0',
		  	dlg : false,
		  	showdlg : true,

		  	what : '',

		  	current : {},

		  	treedata : [],

		  	pathSimplifierIns : null,

		  	infoWindow : null,
		  	
		  	zoom: 10,
		  	center : [],
			//center: [121.59996, 31.197646],
			//center: [116.400274, 39.905812],
			amapManager,

			marker : {
				//position: [121.5273285, 31.21515044],
				position: [],
				// events: {
				// 	click: () => {
				// 		this.clickMarker();
				// 	},
				// },
				// visible: true,
				// draggable: false,
				//template: '<span>1</span>',
				// info : {
				// 	event_longitude : 121.59996,
				// 	event_latitude : 31.197646,
				// },
			},


			eventMarkers : [],

			polygons : [],


			pathPolygon : {
				path : [],
			},

			task_type_label : ['', '紧急任务', '普通', '检查', '日常'],

			status_label : ['', '处理中', '已完成'],

		    polygon : null,


		    events : {
		    	init(o) {
	              // let marker = new AMap.Marker({
	              //   position: [121.59996, 31.197646]
	              // });

	              // marker.setMap(o);

	              AMap.plugin('AMap.DistrictSearch',  () => {
					// 创建行政区查询对象
					var district = new AMap.DistrictSearch({
						// 返回行政区边界坐标等具体信息
						extensions: 'all',
						// 设置查询行政区级别为 区 
						level: 'district'
					})

					district.search('610400', (status, result) => {
						console.log('result');
						console.log(result);
						//console.log(this);

						let polygon = new AMap.Polygon({
			                path: result.districtList[0].boundaries,
			                fillOpacity : 0,
			                strokeWeight : 5,
			            });

						polygon.setMap(o);

						o.setFitView(polygon);
						//o.setZoom(10); 
						//this.initPolygon(result.districtList[0].boundaries);
						// this.polygon.path = ;
						// //新增状态，以上级中心点作为中心。
						// if(this.currentGrid.id == undefined){
						// 	this.center = [
						// 		result.districtList[0].center.lng, 
						// 		result.districtList[0].center.lat
						// 	];
						// }
					})
				  })

	            }
		    },



		    infoDlg : {
		    	position : [108.705117, 34.333439],
		    	info : {},
		    	visible : false,
		    	title : '',
		    	msg : [],
		    },

		    eventDialogVisible : false,
		    currentEvent : {
		    	info : {
		    		title : '',
		    	}
		    },

		}
	},

	props : {

	},

	components : {
		daterange,
		trajectory,
		question,
		user,
		company,
		grid,
		eventinfo,
	},

	computed : {
		...mapGetters({
		  	c : 'center',
		  	cc : 'cityCode',
		})
	},

	methods : {
		open () {
			this.state = this.state == '1' ? '0' : '1';
		},

		close () {
			this.state = '0';
		},

		question () {
			console.log('question');
			this.current = {
				name : '事件',
			};
			this.what = 'question';
			this.dlg = true;
			this.showdlg = true;
		},
		user () {
			console.log('user');
			this.current = {
				name : '网格员',
			};
			this.what = 'user';
			this.dlg = true;
			this.showdlg = true;
		},
		company () {
			console.log('company');
			this.current = {
				name : '企业单位',
			};
			this.what = 'company';
			this.dlg = true;
			this.showdlg = true;
		},
		trajectory () {
			this.current = {
				name : '网格员轨迹',
			};
			this.what = 'trajectory';
			this.dlg = true;
			this.showdlg = true;
		},
		grid () {
			console.log('grid');
			this.current = {
				name : '网格列表',
			};
			this.what = 'grid';
			this.dlg = true;
			this.showdlg = true;
		},

		closeDlg () {
			this.dlg = false;
		},

		init () {
			this.$http({
				fun : 'onlineList',
				grid_id : 1,
				cb : res => {
					console.log('onlineList');
					this.onlineList = res;
				}
			});
		},

		playback (para, gridinfo) {
			console.log('playback');
			console.log(para);
			console.log('gridinfo');
			console.log(gridinfo);

			this.clearAll();

			this.$http({
				fun : 'userTrajectory',
				...para,
				cb : res => {
					if(res.length == 0){
						this.$message.error('没有数据');
						return;
					}
					let arr = [];
					let time = [];
					res.forEach(item => {
						arr.push([item.longitude, item.latitude]);
						time.push(item.create_time);
					});
					this.setPathSimplifier(arr, para.name, time);
				}
			});

			
			if(gridinfo.mapinfo != undefined && gridinfo.mapinfo != ''){
				//手画的网格
				if(parseInt(gridinfo.type) > 2){
					const obj = JSON.parse(gridinfo.mapinfo);
					this.pathPolygon.path = obj.path;
				}else{
					AMap.plugin('AMap.DistrictSearch',  () => {
						// 创建行政区查询对象
						var district = new AMap.DistrictSearch({
							// 返回行政区边界坐标等具体信息
							extensions: 'all',
							// 设置查询行政区级别为 区 
							level: 'district'
						})

						district.search(gridinfo.mapinfo, (status, result) => {
							console.log(result);
							this.pathPolygon.path = result.districtList[0].boundaries;
						})
					})
				}
			}

		},


		clearAll () {
			//把已有的点干掉。
			this.marker.position = [];
			//窗体干掉
			if(this.infoWindow != null){
				this.infoWindow.close();
			}
			//如果有未销毁的轨迹,巡航器，全干掉。
			if(this.pathSimplifierIns != null){
				this.pathSimplifierIns.setData([{
		            name: '',
		            path: [],
		        }]);
				this.pathSimplifierIns.clearPathNavigators();
			}

			//网格干掉
			if(this.polygon != null){
				this.polygon.setPath([]);
			}

			this.pathPolygon.path = [];
		},

		setPathSimplifier (data, name, time) {

			const o = this.amapManager.getMap();

			AMapUI.loadUI(['misc/PathSimplifier'], (PathSimplifier) => {

				if(this.pathSimplifierIns == null){
					this.pathSimplifierIns = new PathSimplifier ({
						zIndex: 100,
			            //autoSetFitView:false,
			            'map': o, //所属的地图实例

			            getPath: function(pathData, pathIndex) {
			                return pathData.path;
			            },
			            getHoverTitle: function(pathData, pathIndex, pointIndex) {
			                if (pointIndex >= 0) {
			                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length + '， 时间 ：' + pathData.time[pointIndex];
			                }
			                return pathData.name + '，点数量' + pathData.path.length;
			            },
			            renderOptions: {
			                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
			            }
					});
				}

				this.pathSimplifierIns.setData([{
		            name: name,
		            path: data,
		            time,
		        }]);

				this.pathSimplifierIns.clearPathNavigators();

		        let navg1 = this.pathSimplifierIns.createPathNavigator(0, {
		            loop: true, //循环播放
		            speed: 120, //巡航速度，单位千米/小时
		            pathNavigatorStyle: {
		            	width: 24,
                    	height: 24,
                    	content: PathSimplifier.Render.Canvas.getImageContent('./person1.png', () => {
                    			this.pathSimplifierIns.renderLater();
                    		}, () => {
                    			console.log('图片加载失败');
                    		}),
	                    strokeStyle: null,
	                    fillStyle: null,
		            }
		        });

		        navg1.start();

			});
		},

		changeDlg () {
			this.showdlg = !this.showdlg;
		},

		getpoint (item) {
			this.clearAll();

			console.log(item);

			if(item.what == 'company'
			|| (item.what == 'question' && item.status != '1')){
				this.marker.position = [item.lon, item.lat];

				this.marker.events = {
					click: () => {
						this.clickMarker1(item);
					},
				};

				this.marker['info'] = item;

				this.$nextTick(() => {
					this.marker.visible = true;
				});
			}

			this.center = [parseFloat(item.lon), parseFloat(item.lat)];
			
		},

		clickMarker (item) {
			
			if(this.marker.position.length == 0){
				return;
			}
			const o = this.amapManager.getMap();

			AMapUI.loadUI(['overlay/SimpleInfoWindow'], (SimpleInfoWindow) => {

				if(this.infoWindow == null){
					this.infoWindow = new SimpleInfoWindow({
						offset : new AMap.Pixel(0, -31)
					});
				}

				var msg = '';
				var title = '';

				const { what, lon, lat } = this.marker.info;

				if(what == 'question'){

					const {
						question_title, 
						release_name, 
						grid_names,
						task_type,
						status,
						release_time,
						handler_grid_name
					} = this.marker.info;

					title = question_title;

					msg = 
					'上报人：' + release_name + '<br>' + 
					'上报网络：' + grid_names + '<br>' +
					'任务类型：' + this.task_type_label[parseInt(task_type)] + '<br>' +
					'处理状态：' + this.status_label[parseInt(status)] + '<br>' +
					'创建事件：' + release_time;// + '<br>' + 
					//'当前处理人：' + handler_grid_name ;

				}else if(what == 'user'){

					const {
						name, 
						mobile, 
						company_name,
					} = this.marker.info;

					title = name;

					msg = 
					'人员名称：' + name + '<br>' +
					'联系电话：' + (mobile == undefined ? '' : mobile ) + '<br>' +
					'所属网格：' + company_name ;
				}else if(what == 'company'){

					const {
						name, 
						company_type_name, 
						address,
						hb_name,
						hb_mobile,
						lxr_name,
						lxr_phone,
					} = this.marker.info;

					title = name;

					msg = 
					'企业名称：' + name + '<br>' +
					'企业类型：' + company_type_name + '<br>' +
					'企业地址：' + address + '<br>' +
					'环保联系人：' + hb_name + '<br>' +
					'环保联系人电话：' + hb_mobile + '<br>' +
					'联系人：' + (lxr_name == undefined ? '' : lxr_name ) + '<br>' +
					'联系人电话：' + (lxr_phone == undefined ? '' : lxr_phone );
				}

				this.infoWindow.setInfoTitle(title);
				this.infoWindow.setInfoBody(msg);
				this.infoWindow.open(o, [lon, lat]);
			});
		},



		//点击初始化的点
		clickMarker1 (item) {
			this.clearAll();
			console.log('点击初始化的点');
			console.log(item);
			const { what, lon, lat } = item;

			this.infoDlg.position = [lon, lat];
			this.infoDlg.info = item;
			this.infoDlg.msg = [];

			if(what == 'question'){

				const {
					question_title, 
					release_name, 
					grid_names,
					task_type,
					status,
					release_time
				} = item;

				this.infoDlg.title = question_title;

				this.infoDlg.msg.push('上报人：' + release_name);
				this.infoDlg.msg.push('上报网络：' + grid_names);
				this.infoDlg.msg.push('任务类型：' + this.task_type_label[parseInt(task_type)]);
				this.infoDlg.msg.push('处理状态：' + this.status_label[parseInt(status)]);
				this.infoDlg.msg.push('创建事件：' + release_time);
				
			}else if(what == 'user'){

				const {
					name, 
					mobile, 
					company_name,
				} = item;

				this.infoDlg.title = name;

				this.infoDlg.msg.push('人员名称：' + name);
				this.infoDlg.msg.push('联系电话：' + (mobile == undefined ? '' : mobile ));
				this.infoDlg.msg.push('所属网格：' + company_name);

			}else if(what == 'company'){

				const {
					name, 
					company_type_name, 
					address,
					hb_name,
					hb_mobile,
					lxr_name,
					lxr_phone,
				} = item;

				this.infoDlg.title = name;

				this.infoDlg.msg.push('企业名称：' + name);
				this.infoDlg.msg.push('企业类型：' + company_type_name);
				this.infoDlg.msg.push('企业地址：' + address);
				this.infoDlg.msg.push('环保联系人：' + hb_name);
				this.infoDlg.msg.push('环保联系人电话：' + hb_mobile);
				this.infoDlg.msg.push('联系人：' + (lxr_name == undefined ? '' : lxr_name ));
				this.infoDlg.msg.push('联系人电话：' + (lxr_phone == undefined ? '' : lxr_phone));
			}

			
			this.center = [lon, lat];
			const o = this.amapManager.getMap();
			o.setZoom(15);

			this.infoDlg.visible = false;
			this.$nextTick(() => {
				this.infoDlg.visible = true;
			});

		},


		showgrid (item) {

			this.clearAll();

			console.log('showgrid');
			console.log(item);

			const map = this.amapManager.getMap();

			if(item.mapinfo == undefined ){
				if(item.id != '1'){
					this.$message.error('没有数据');
				}
				return;
			}

			if(this.polygon == null){
				this.polygon = new AMap.Polygon({
			        path: [],
			        strokeColor: "#FF33FF", 
			        strokeWeight: 6,
			        strokeOpacity: 0.2,
			        fillOpacity: 0.4,
			        fillColor: '#1791fc',
			        zIndex: 50,
			    })
			    map.add(this.polygon)
			}

			if(parseInt(item.type) > 2){
				const obj = JSON.parse(item.mapinfo);
				this.polygon.setPath(obj.path);
			    map.setFitView([ this.polygon ])
			}else{

				AMap.plugin('AMap.DistrictSearch',  () => {
					// 创建行政区查询对象
					var district = new AMap.DistrictSearch({
						// 返回行政区边界坐标等具体信息
						extensions: 'all',
						// 设置查询行政区级别为 区 
						level: 'district'
					})

					district.search(item.mapinfo, (status, result) => {
						console.log(result);
						this.polygon.setPath(result.districtList[0].boundaries);
			    		map.setFitView([ this.polygon ])
					})
				})
			}
		},


		//初始化所有事件，人员。
		init1 () {

			this.$http({
				fun : 'eventNoList',
				start_time : this.$util.date2str(new Date()) + ' 00:00:00',
				end_time : this.$util.date2str(new Date()) + ' 23:59:59',
				grid_id : '1',
				status : '1',
				cb : res => {
					console.log('初始化数据');
					console.log(res);
					res.forEach(item => {
						const info = {
							...item,
							what : 'question',
							lon : item.event_longitude, 
							lat : item.event_latitude,
						};

						let obj = {
							position: [item.event_longitude, item.event_latitude],
							events: {
								click: () => {
									this.clickMarker1(info);
								},
							},
							visible: true,
							info,
							icon : './event.png',
						};
						this.eventMarkers.push(obj);
					})
				}
			});

			this.$http({
				fun : 'onlineNoList',
				grid_id : '1',
				cb : res => {
					console.log('初始化人员数据');
					console.log(res);
					res.forEach(item => {
						const info = {
							...item,
							what : 'user',
							lon : item.now_longitude, 
							lat : item.now_latitude,
						};

						let obj = {
							position: [item.now_longitude, item.now_latitude],
							events: {
								click: () => {
									this.clickMarker1(info);
								},
							},
							visible: true,
							info,
							icon : './user.png',
						};
						this.eventMarkers.push(obj);
					});

					console.log('this.eventMarkers');
					console.log(this.eventMarkers);
				}
			});


			// var adcodes = [310000, 330100, 330200];

       		//districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {


       		this.$http({
       			fun : 'grideList',
       			cb : res => {
       				console.log('subGrideNoList');
       				console.log(res);

       				//mapinfo type > 2 的，存的是点数组，小于等于2的需要查询。
       				let xiaoyu2 = [];
       				let dayu2 = [];
       				res.forEach(item => {
       					if(item.mapinfo != undefined && item.mapinfo != ''){
       						if(parseInt(item.type) > 2){
	       						dayu2.push(JSON.parse(item.mapinfo));
	       					}else if(parseInt(item.type) <= 2){
	       						xiaoyu2.push(item.mapinfo);
	       					}
       					}
       				})


       				console.log('需要画网格的数据');
       				console.log(dayu2);
       				console.log(xiaoyu2);


       				this.xiaoyu2grid(xiaoyu2);
       				this.dayu2grid(dayu2);
       			}
       		});

			
		},

		//小于2的画网格
		xiaoyu2grid (adcodes) {
			lazyAMapApiLoaderInstance.load().then(() => {

				AMap.plugin('AMap.DistrictSearch',  () => {
					// 创建行政区查询对象
					var district = new AMap.DistrictSearch({
						// 返回行政区边界坐标等具体信息
						extensions: 'all',
						// 设置查询行政区级别为 区 
						level: 'district'
					})

					//var adcodes = ['610427']; 

					adcodes.forEach(adcode => {
						district.search(adcode, (status, result) => {
							console.log(adcode);
							console.log(result);
							let path = [];
							path = result.districtList[0].boundaries;
							this.polygons.push({
								path,
								fillOpacity : 0,
							})
						})
					})

					
				})

			})

		},


		dayu2grid (data) {

			data.forEach(item => {
				this.polygons.push({
					path : item.path,
					fillOpacity : 0,
				})
			});
		},



		initPage (DistrictExplorer) {
			const map = this.amapManager.getMap();

			//创建一个实例
			var districtExplorer = new DistrictExplorer({
				map //关联的地图实例
			});

			var adcode = ['610428', '610426']; 

			districtExplorer.loadMultiAreaNodes(adcode, (error, areaNode) => {

				if (error) {
					console.error(error);
					return;
				}

				console.log('areaNode');
				console.log(areaNode);

				//绘制载入的区划节点
				this.renderAreaNode(districtExplorer, areaNode);
			});
		},


		renderAreaNode(districtExplorer, areaNodes) {

			//清除已有的绘制内容
			districtExplorer.clearFeaturePolygons();

			//just some colors
			var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00"];

			areaNodes.forEach(areaNode => {
				//绘制子级区划
				// districtExplorer.renderSubFeatures(areaNode, (feature, i) => {

				// 	var fillColor = colors[i % colors.length];
				// 	var strokeColor = colors[colors.length - 1 - i % colors.length];

				// 	return {
				// 		cursor: 'default',
				// 		bubble: true,
				// 		strokeColor: strokeColor, //线颜色
				// 		strokeOpacity: 1, //线透明度
				// 		strokeWeight: 1, //线宽
				// 		fillColor: fillColor, //填充色
				// 		fillOpacity: 0.35, //填充透明度
				// 	};
				// });

				//绘制父级区划，仅用黑色描边
				districtExplorer.renderParentFeature(areaNode, {
					cursor: 'default',
					bubble: true,
					strokeColor: 'black', //线颜色
					fillColor: null,
					strokeWeight: 3, //线宽
				});
			});

			

			//更新地图视野以适合区划面
			//map.setFitView(districtExplorer.getAllFeaturePolygons());
		},


		//查看事件详情
		onClick (item) {
			console.log('info');

			console.log(item);
			this.$http({
				fun : 'eventInfo',
				id : item.id,
				cb : res => {

					this.$http({
						fun : 'flowList',
						id : item.id,
						cb : res1 => {
							console.log('ffffffff');
							console.log(res);
							console.log(res1);

							res1.forEach(item => {
								if(item.params == undefined || item.params == ''){
									item['paramsobj'] = {
										content : '',
									};
								}else{
									item['paramsobj'] = JSON.parse(item.params);
								}
							})

							this.currentEvent = {
								info : {
									...res,
									imgs : res.question_img ? res.question_img.split(',') : [],
									videos : res.question_video ? res.question_video.split(',') : [],
								},
								flow : res1,
								
							};
							console.log(this.currentEvent);
							this.activeName2 = 'first';
							this.eventDialogVisible = true;
						}
					});
				}
			});
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();

		this.$http({
			fun : 'grideList',
			cb : res => {
				console.log(res);

				const result = this.$util.transData(res, 'id', 'parent_id', 'children');
				console.log(result);
				this.treedata = result;
				// this.treedata.unshift({
				// 	name : '全部网格',
				// 	id : 1,
				// });

			}
		});

		this.init1();

		this.center = this.c;
	},


}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}

.a1 {
	position: absolute;
	/*background-color: #2092ab;*/
	/*padding: 0 10px;*/
}

.a2 {
	position: absolute;
	width: 414px;
	z-index: 999;
}

.a3 {
	width:60px; 
	height:42px; 
	background:#4BACC6; 
	color:#fff; 
	text-align: center; 
	padding-top:18px; 
	margin-top:10px;
	border-radius: 7px;
}

.a4 {
	width:60px; 
	height:52px; 
	background:#4BACC6; 
	color:#fff; 
	text-align: center; 
	padding-top:8px; 
	margin-top:10px;
	border-radius: 7px;
}
</style>
